<script setup lang="ts">

import ThreeDiv from "@/Components/ThreeDiv.vue";
import ThreeButton from "@/Components/ThreeButton.vue";
import {onMounted, ref} from 'vue';
import UndoRedoSearch from "@/Components/UndoRedoSearch.vue";
import ChildBoth from "@/Components/ChildBoth.vue";
import SongBottom from "@/Components/SongBottom.vue";
import LeftList from "@/Components/LeftList.vue";
import RightUserPhoto from "@/Components/RightUserPhoto.vue";
import SongList from "@/Components/SongList.vue";
import {findUserById, updateUserNameById} from "@/Network/userApi";
import type {typeUser} from "@/store/dataType";
import AudioPlayer from "@/Components/audioPlayer.vue";

const isUsernameEditMode = ref(false);
const newUsername = ref('');
const pageName = "UserPage"
let user:typeUser = ref({})


function onStartEditUsername() {
  isUsernameEditMode.value = true;
}


function onOkUsername() {
  isUsernameEditMode.value = false;
  console.log(newUsername.value)
  let userUpdate = ref({
    id:localStorage.getItem("userId"),
    name:newUsername.value
  })
  updateUserNameById(userUpdate.value).then(res=>{
    user.value = res.data
  })
  localStorage.setItem("username",userUpdate.value.name)
}


onMounted(()=>{
  findUserById(localStorage.getItem("userId")).then(res=>{
    user.value = res.data
  })
})
</script>


<template>
  <song-bottom class="pl-30 pr-35" :pageName="pageName"></song-bottom>
  <div class="body flex">
    <left-list class="h-full w-55"></left-list>
    <div class="main grow h-183 flex flex-col overflow-auto pb-15 mx-3 ml-60">
      <undo-redo-search class="w-full ml--5" :key="new Date().getTime()"></undo-redo-search>
      <div class=" main grow h-200 flex flex-col overflow-auto">
        <div class="h-50 flex-col ml-5">
          <div class="flex items-center mt-20 my-3 " >
            <img class=" w-40 h-auto rounded-full border-yellow-4 border-5 ml-5" :src="user.userImg"/>
            <div v-if="isUsernameEditMode" class="flex flex-col gap-3 ml-5 w-70">
              <input v-model="newUsername" class="outline-none text-8  rounded-xl pl-5 bg-gray-2 text-yellow"  />
              <div class="flex justify-around items-center ">
                <button @click="onOkUsername" class="w-20 h-12 text-5  bg-yellow-1 text-gray-7 rounded-xl hover:bg-yellow-2 ">确定</button>
                <button @click="isUsernameEditMode=false" class="w-20 h-12 text-5  bg-yellow-1 text-gray-7 rounded-xl hover:bg-yellow-2 ">取消</button>
              </div>

            </div>
            <div v-else class="flex flex-col justify-start  ml-6 mt-4">
              <div class="text-10 w-100 text-yellow font-bold" >{{ user.name }}</div>
              <button  @click="onStartEditUsername" class="w-20 h-12 text-6   mt-2 bg-yellow-1 text-gray-7 rounded-xl hover:bg-yellow-2 ">修改</button>
            </div>
          </div>
          <song-list class="px-11 mt-7 " :pageName="pageName"></song-list>
        </div>
      </div>
    </div>
  </div>




<!--  <child-both></child-both>-->
<!--  <song-bottom class="pl-30 pr-35"></song-bottom>-->
<!--  <div class="body flex">-->
<!--    <left-list></left-list>-->
<!--    <div class="main grow h-200 flex flex-col overflow-auto pb-15 mx-3 ">-->
<!--      <undo-redo-search></undo-redo-search>-->

<!--      <div class=" main grow h-200 flex flex-col overflow-auto">-->
<!--        <div class="h-50 flex-col ml-5">-->
<!--          <div class="flex items-center mt-20 my-3 " >-->
<!--            <img class=" w-40 h-auto rounded-full border-pink-2 border-5 ml-5" :src="user.userImg"/>-->
<!--            <div v-if="isUsernameEditMode" class="flex flex-col gap-3 ml-5 w-70">-->
<!--              <input v-model="newUsername" class="outline-none text-8  rounded-xl pl-5 bg-gray-1 text-yellow"  />-->
<!--              <div class="flex justify-around items-center ">-->
<!--                <button @click="onOkUsername" class="w-20 h-12 text-5  bg-[#DEF7F5] text-#538ba2 rounded-xl hover:bg-cyan-2 ">确定</button>-->
<!--                <button @click="isUsernameEditMode=false" class="w-20 h-12 text-5  bg-[#DEF7F5] text-#538ba2 rounded-xl hover:bg-cyan-2 ">取消</button>-->
<!--              </div>-->

<!--            </div>-->
<!--            <div v-else class="flex flex-col justify-start  ml-6 mt-4">-->
<!--              <div class="text-10 w-100 text-yellow font-bold" >{{ user.name }}</div>-->
<!--              <button  @click="onStartEditUsername" class="w-20 h-12 text-6   mt-2 bg-[#DEF7F5] text-#538ba2 rounded-xl hover:bg-cyan-2 ">修改</button>-->
<!--            </div>-->
<!--          </div>-->
<!--          <three-div></three-div>-->
<!--          <three-button></three-button>-->
<!--          <song-list class="px-10 ml-2" :pageName="pageName"></song-list>-->
<!--        </div>-->
<!--      </div>-->

<!--    </div>-->
<!--    <right-user-photo></right-user-photo>-->
<!--  </div>-->


</template>

<style scoped>
div::-webkit-scrollbar {
  display: none;
}
</style>